<template>
	<!-- 1. -->
	<el-container style="height: 1000px; border: 1px solid #eee">
		<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
			<el-menu :default-active="$route.path" :default-openeds="['1', '3']" router>
				<el-submenu index="1">
					<template slot="title"><i class="el-icon-message"></i>商城管理系统</template>
					<el-menu-item-group>
						<template slot="title"></template>
						<el-menu-item index="/index">首页</el-menu-item>
						<el-menu-item index="/user">用户信息管理</el-menu-item>
					</el-menu-item-group>
					<el-menu-item-group title="主营业务">
					  <el-menu-item index="/goodList">商品列表</el-menu-item>
					  <el-menu-item index="/money">购物车</el-menu-item>
					</el-menu-item-group>

				</el-submenu>
			</el-menu>
		</el-aside>

		<el-container>
			<el-header style="text-align: right; font-size: 12px">
				<el-dropdown>
					<i class="el-icon-setting" style="margin-right: 15px"></i>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item>查看</el-dropdown-item>
						<el-dropdown-item>新增</el-dropdown-item>
						<el-dropdown-item>删除</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
				<span>{{currentUserName}}</span>
			</el-header>

			<el-main>
				<el-button type="primary" @click="dialogFormVisible = true">新增用户</el-button>
				<!-- 当在这个输入框中输入信息之后 则将symbol设置为1 给系统说明此时将要进行“通过用户名查询用户信息” 这一功能 -->
				<el-input v-model="searchByUsername" @input="symbol=1" autocomplete="off" placeholder="输入查询的用户名" style="width: 200px;margin-left: 50px;"></el-input>
				<el-input v-model="searchById" @input="symbol=2" autocomplete="off" placeholder="输入查询的ID号" style="width: 200px;margin-left: 30px;"></el-input>
				
				<el-select v-model="searchBySex" placeholder="请选择性别" @input="symbol=3" style="width: 200px;margin-left: 30px;">
					<el-option label="男" value="1"></el-option>
					<el-option label="女" value="2"></el-option>
				</el-select>
				
				
				<el-button type="danger" @click="search()" style="margin-left: 30px;">搜索</el-button>
				<el-table :data="tableData">
					<el-table-column prop="id" label="ID" width="210">
					</el-table-column>
					<el-table-column prop="name" label="用户名" width="180">
					</el-table-column>
					<el-table-column prop="sex" label="性别" width="180">
					</el-table-column>
					<el-table-column prop="role" label="角色身份" width="180">
					</el-table-column>
					<el-table-column prop="email" label="邮箱地址" width="380">
					</el-table-column>

					<el-table-column>
						<template slot-scope="scope">
							<el-button type="warning" @click="update(scope.row.id)" plain>修改</el-button>
							<el-button type="danger" @click="deletec(scope.row.id)" plain>删除</el-button>
						</template>
					</el-table-column>

				</el-table>

			</el-main>
		</el-container>
		<el-dialog title="新增用户" :visible.sync="dialogFormVisible" style="width: 1000px;margin-left: 450px;">
			<el-form :model="form">
				<el-form-item label="用户名" :label-width="formLabelWidth">
					<el-input v-model="username" autocomplete="off" style="width: 200px;"></el-input>
				</el-form-item>
				<el-form-item label="密码" :label-width="formLabelWidth">
					<el-input v-model="password" autocomplete="off" style="width: 200px;"></el-input>
				</el-form-item>
				<el-form-item label="性别" :label-width="formLabelWidth">
					<el-select v-model="sex" placeholder="请选择性别" style="width: 200px;">
						<el-option label="男" value="1"></el-option>
						<el-option label="女" value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="邮箱" :label-width="formLabelWidth">
					<el-input v-model="email" autocomplete="off" style="width: 200px;"></el-input>
				</el-form-item>
				<el-form-item label="角色" :label-width="formLabelWidth">
					<el-select v-model="role" placeholder="请选择角色" style="width: 200px;">
						<el-option label="买家" value="1"></el-option>
						<el-option label="卖家" value="2"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="add()">确 定</el-button>
			</div>
		</el-dialog>
		
		
		<el-dialog title="修改信息" :visible.sync="dialogFormVisible2" style="width: 1000px;margin-left: 450px;">
			<el-form :model="form">
				<el-form-item label="用户名" :label-width="formLabelWidth">
					<el-input v-model="username2" autocomplete="off" style="width: 200px;"></el-input>
				</el-form-item>
				<el-form-item label="密码" :label-width="formLabelWidth">
					<el-input v-model="password2" autocomplete="off" style="width: 200px;"></el-input>
				</el-form-item>
				<el-form-item label="性别" :label-width="formLabelWidth">
					<el-select v-model="sex2" placeholder="请选择性别" style="width: 200px;">
						<el-option label="男" value="1"></el-option>
						<el-option label="女" value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="邮箱" :label-width="formLabelWidth">
					<el-input v-model="email2" autocomplete="off" style="width: 200px;"></el-input>
				</el-form-item>
				<el-form-item label="角色" :label-width="formLabelWidth">
					<el-select v-model="role2" placeholder="请选择角色" style="width: 200px;">
						<el-option label="买家" value="1"></el-option>
						<el-option label="卖家" value="2"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible2 = false">取 消</el-button>
				<el-button type="primary" @click="alter()">确 定</el-button>
			</div>
		</el-dialog>
		
		
		
	</el-container>
</template>

<script>
	export default {
		data() {
			const item = {
				date: '2016-05-02',
				name: '王小虎',
				address: '上海市普陀区金沙江路 1518 弄'
			};
			return {
				tableData: this.$store.state.user,
				formLabelWidth: '120px',
				dialogFormVisible: false,
				username: '',
				password: '',
				sex: "请选择性别",
				email: '',
				role: "请选择角色身份",
				
				dialogFormVisible2: false,
				username2: '',
				password2: '',
				sex2: "请选择性别",
				email2: '',
				role2: "请选择角色身份",
				
				currentId:"", //用于保存当前ID号
				   
				symbol:0, //0为初始状态 1根据用户名来查询 2根据ID号来查询 3根据性别来查询 4根据角色身份来查询 5根据邮箱地址查询
				searchByUsername:"", //用于搜索的用户名
				searchById:"",//用于搜索的ID号
				searchBySex:"", //用于搜索的性别				
				currentUserName:this.$store.state.currentUsername,
			}
		},
		methods: {
			deletec(id) {
				this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
					})
					.then(() => {
						var url = "/api/deleteUser?id=" + id;
						this.axios
							.get(url)
							.then((response) => {
								this.getuser(); //拉取所有用户数据
								this.tableData = this.$store.state.user; //把用户数据显示到表上
								// location.reload();
							})
							.catch(function(error) {


								alert("删除失败");
							});

						this.$message({
							type: "success",
							message: "删除成功!",
						});
					})
					.catch(() => {
						this.$message({
							type: "info",
							message: "已取消删除",
						});
					});
			},
			add() {
				var url = "/api/regist";
				var d = "?name=" + this.username + "&password=" + this.password + "&sex=" + this.sex + "&email=" + this
					.email + "&role=" + this.role;
				this.axios
					.get(url + d)
					.then((response) => {
						alert("新增成功");
						this.getuser(); //拉取所有用户数据
						this.tableData = this.$store.state.user; //把用户数据显示到表上
						this.dialogFormVisible=false; //关闭对话框
					})
					.catch(function(error) {
						alert("新增失败");
					});
			},
			update(id){
				//1.获取当前点击的这一行用户数据 并且显示在对话框中
				var url = "/api/findById?id="+id;
				this.axios.get(url).then((response)=>{
					//绑定查询到的数据
					this.username2 = response.data[0].name;
					this.password2 = response.data[0].password;
					this.email2 = response.data[0].email;
					if(response.data[0].sex==1){
						this.sex2 = "男";
					}
					else{
						this.sex2 = "女";
					}
					
					if(response.data[0].role==1){
						this.role2 = "买家";
					}
					else{
						this.role2 = "卖家";
					}
					
					this.currentId = id;
					this.dialogFormVisible2 = true; //打开对话框
				})
				
			},
			//2.完成修改功能
			alter(){
				var temp1,temp2;
				if(this.sex2 == "男" || this.sex2 ==1){
					temp1 = 1;
				}
				else{
					temp1 = 2;
				}
				if(this.role2 == "买家" || this.role2 ==1){
					temp2 = 1;
				}
				else{
					temp2 = 2;
				}
				var url ="/api/updateById?name="+this.username2+"&password="+this.password2
				+"&sex="+temp1+"&email="+this.email2+"&role="
				+temp2+"&id="+this.currentId;
				this.axios.get(url).then((response)=>{
					// element.eleme.cn
					this.$message({
						type: "success",
						message: "修改成功!",
					});
					this.getuser(); //拉取所有用户数据
					this.tableData = this.$store.state.user; //把用户数据显示到表上
					this.dialogFormVisible2=false; //关闭对话框
				})
			},
			search(){ //查询功能
				var url;
				switch(this.symbol){
					case 0:
						this.$message({
							type: "error",
							message: "请输入查询信息",
						});
						break;
					case 1:
						url="/api/findByName?name="+this.searchByUsername;
						this.axios.get(url).then((response)=>{
							
								
								this.$store.state.user = []; //清空原本数据
								this.$store.commit("getUser", response); //把查出来的数据添加进去
								this.tableData = this.$store.state.user; //把用户数据显示到表上
								
							
						});
						break;
					case 2:
						url="/api/findById?id="+this.searchById;
						this.axios.get(url).then((response)=>{
							
								
								this.$store.state.user = []; //清空原本数据
								this.$store.commit("getUser", response); //把查出来的数据添加进去
								this.tableData = this.$store.state.user; //把用户数据显示到表上
								
							
						});
						break;
					case 3:
						url="/api/findBySex?sex="+this.searchBySex;
						this.axios.get(url).then((response)=>{
							
								
								this.$store.state.user = []; //清空原本数据
								this.$store.commit("getUser", response); //把查出来的数据添加进去
								this.tableData = this.$store.state.user; //把用户数据显示到表上
								
							
						});
						break;
				}
			}
		}
	};
</script>

<style>
	/* 2. */
	.el-header {
		background-color: #B3C0D1;
		color: #333;
		line-height: 60px;
	}

	.el-aside {
		color: #333;
	}
</style>
